<template>
  <div style="padding: 20px">
    <el-card class="box-card">
      <div slot="header">
        <!--<span>首页>行业管理>新增/编辑行业</span>-->
        <!--<br>-->
        <!--<br>-->
        <div style="display: flex;">
          <div style="width: 400px;">
            <div class="hanyename">行业大类名称:
              <el-input v-model="list.categoryName" />
            </div>
            <div class="hanyename">行业大类排序:
              <el-input v-model="list.categorySort" />
            </div>
          </div>
          <div style=" padding: 5px 0;flex: 1;">
            <el-button type="primary" round @click="updateCategoryInfo()">提交</el-button>
          </div>
        </div>
      </div>
      <div v-if="list.categoryName!==''">
        <el-button type="success" size="mini" round @click="handleCreate()">新增行业分类</el-button>
      </div>
      <div v-for="(tag,index) in list.adminIndustryCategoryVos" :key="tag.id" class="text item">
        <span>{{index + 1}} 、</span>{{ tag.categoryName }}
        <el-button type="primary" round size="mini" @click="handleUpdate(tag)">编辑</el-button>
        <el-button type="danger" round size="mini" @click="handleDelete(tag)">删除</el-button>
        <br>
        <div v-for="(tag1, i) in list.adminIndustryCategoryVos[index].adminIndustryCategoryVos" :key="tag1.id"
          class="text item">
          <el-tag type="info" style="margin-left:12px ; padding: 3px 0; font-size:5px" size="mini">具体行业{{i+1}}、</el-tag>
          {{ tag1.categoryName }}
        </div>
        <br>
      </div>
    </el-card>

    <!-- 新增/编辑行业 -->
    <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" width="800px" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="top" label-width="100px"
        style="width: 80%; margin-left:50px;">
        <el-form-item label="小类名称" prop="categoryName">
          <el-input v-model="dataForm.categoryName" placeholder="小类名称" />
        </el-form-item>
        <el-form-item label="小类排序" prop="categorySort">
          <el-input v-model="dataForm.categorySort" placeholder="数字小的排在前面" type="number" />
        </el-form-item>
        <el-form-item label="编辑具体行业">
          <el-table :data="dataForm.adminIndustryCategoryVos" style="width: 100%">
            <el-table-column prop="categorySort" label="排序" width="70">
              <template slot-scope="scope">
                <el-input v-model="scope.row.categorySort" />
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="名称" width="300">
              <template slot-scope="scope">
                <el-input v-model="scope.row.categoryName" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-delete" type="danger" circle round plain @click="handleCategoryDelete(scope.row)">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
          <el-button class="button-introduce"
          style="float:left" icon="el-icon-plus" size="small" type="primary" plain @click="handleCategoryAdd()">添加行业</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
        <el-button size="mini" v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>
  .constant {
    width: 100%;
  }

  .img {
    margin-top: 20px;
    width: 150px;
    height: 150px;
  }

  .img img {
    width: 100%;
    height: 100%;
  }

  .list {
    width: 100%;
  }

  .list-cell {
    width: 100%;
    line-height: 50px;
  }

  .cell {
    width: 100%;
    /*display: inline-flex;*/
  }

  .set {
    color: deepskyblue;
  }

  .line {
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }

  .erweima {
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }

  .text {
    font-size: 15px;
  }

  .text1 {
    text-shadow: 5px 2px 6px #000;
  }

  .item {
    margin-top: 10px;
  }

  .hanyename {
    width: 200px;
    white-space: nowrap;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  /*.box-card {*/
  /*width: 480px;*/
  /*}*/
</style>

<script>
  import {
    updateCategory,
    createCategory,
    queryIndustry,
    deleteIndustry,
    updateOrCreateIndustry
  } from '@/api/industryCategory'
  import {
    uploadPath
  } from '@/api/storage'
  import {
    getToken
  } from '@/utils/auth'
  import Pagination from '@/components/Pagination'
  import TagsView from '../layout/components/TagsView' // Secondary package based on el-pagination

  export default {
    name: 'IndustryCategoryCreatet',
    components: {
      TagsView,
      Pagination
    },
    data() {
      return {
        uploadPath,
        courseId: undefined,
        questionAnswerList: [{
          id: undefined,
          examQuestionId: undefined,
          title: undefined,
          content: undefined
        }],
        list: undefined,
        listLoading: true,
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        listQuery: {
          id: undefined,
          page: 1,
          limit: 20,
          courseId: this.courseId,
          questionName: undefined,
          sort: 'serial_number',
          order: 'asc'
        },
        rules: {
          categoryName: [{
            required: true,
            message: '小类名称不能为空',
            trigger: 'blur'
          }],
          categorySort: [{
            required: true,
            message: '小类序号不能为空',
            trigger: 'blur'
          }]
        },
        downloadLoading: false,
        requestParam: {
          id: undefined,
          pid: undefined,
          type: undefined
        },
        dataForm: {
          id: undefined,
          pid: undefined,
          categoryName: undefined,
          categoryType: undefined,
          categorySort: undefined,
          deleteMark: undefined,
          createDate: undefined,
          // adminIndustryCategoryVos: undefined,
          adminIndustryCategoryVos: [{
            categoryType: '3',
            categorySort: '',
            categoryName: ''
          }]
        },
        resetForm() {
          this.dataForm = {
            id: undefined,
            pid: undefined,
            categoryName: undefined,
            categoryType: undefined,
            categorySort: undefined,
            deleteMark: undefined,
            createDate: undefined,
            adminIndustryCategoryVos: [{
              categoryType: '3',
              categorySort: '',
              categoryName: ''
            }]
          }
        },
        resetList() {
          this.list = {
            id: undefined,
            pid: 0,
            categoryName: '',
            categoryType: 1,
            categorySort: 50,
            deleteMark: 0,
            createDate: undefined,
            adminIndustryCategoryVos: []
          }
        }
      }
    },
    computed: {
      headers() {
        return {
          'X-Litemall-Admin-Token': getToken()
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      uploadPicUrl: function(response) {
        this.dataForm.picUrl = response.data.url
      },
      init: function() {
        this.resetList() // 初始化list参数
        if (this.$route.query.id != null) {
          this.requestParam.id = this.$route.query.id
          this.requestParam.pid = this.$route.query.pid
          this.requestParam.type = this.$route.query.type
          this.getList()
        }
        // this.getList()
      },
      getList() {
        this.listLoading = true
        queryIndustry(this.requestParam)
          .then(response => {
            this.list = response.data.data
            this.listLoading = false
          })
          .catch(() => {
            this.list = undefined
            this.listLoading = false
          })
      },
      handleUpdate(tag) {
        this.dataForm = Object.assign({}, tag)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].clearValidate()
        // })
      },
      updateData() {
        updateCategory(this.dataForm)
          .then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '更新成功'
            })
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      },
      updateCategoryInfo() {
        updateOrCreateIndustry(this.list)
          .then(response => {
            this.list.id = response.data.data.id // 得到id，为了新增小分类功能  id==pid
            this.requestParam.id = response.data.data.id // 初始化页面需要的参数
            this.requestParam.pid = 0
            this.requestParam.type = 1
            // this.dialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '执行成功'
            })
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      },

      handleCategoryAdd() {
        const IndustryCategoryVos = {
          categoryType: '3',
          categorySort: this.dataForm.adminIndustryCategoryVos[this.dataForm.adminIndustryCategoryVos.length - 1].categorySort + 1,
          categoryName: ''
        }
        this.dataForm.adminIndustryCategoryVos.push(IndustryCategoryVos)
      },
      handleCategoryDelete(row) {
        const index = this.dataForm.adminIndustryCategoryVos.indexOf(row)
        this.dataForm.adminIndustryCategoryVos.splice(index, 1)
        if (row.id != null) { // 判断如果id=null不请求
          this.handleDelete(row)
        }
      },
      handleCreate() {
        this.resetForm()
        if (this.list.id === '' || this.list.id === null || this.list.id === undefined) {
          this.$confirm('清先添加大分类并提交', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          this.dataForm.pid = this.list.id // pid=大分类id
          this.dataForm.categoryType = 2 // 小分类
          this.dialogStatus = 'create'
          this.dialogFormVisible = true
        }
      },
      createData() {
        createCategory(this.dataForm)
          .then(response => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '创建成功'
            })
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      },
      handleDelete(row) {
        deleteIndustry(row)
          .then(response => {
            this.getList()
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      }

    }
  }
</script>
